<template>
  <div class="home">
    <div class="login-logo-box">
      <!-- <img class="" src="../../assets/imgs/login-logo.png"> -->
       <div class="container">
        <div class="logo"></div>
        <div>
            <p class="title">传统中医协会</p>
            <p class="www">www.zhongyixiehui.com.cn</p>
        </div>
       </div>
    </div>
    <div class="login-box">
      <img class="login-box-img" src="../../assets/imgs/login-img.png">
      <ul class="login-enter">
        <li class="datebase-li" style="background-color: rgba(38,80,199,0.05);position: relative;">
          <h1>全国人才职业能力素质评价库</h1>
          <h2>―― 信息查询平台 ――</h2>
          <el-form ref="formRef" :model="form" :rules="rules" label-width="170px" size="large">
            <el-form-item label="姓名" prop="userName">
              <el-input v-model="form.userName" class="ipt" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="身份证号" prop="idCard">
              <el-input v-model="form.idCard" class="ipt" placeholder="请输入身份证号" />
            </el-form-item>
            <el-form-item label="岗位名称" prop="certificateName">
              <el-input v-model="form.certificateName" class="ipt" placeholder="请输入岗位名称"  />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" class="btn" @click="onSubmit">证书查询</el-button>
            </el-form-item>
          </el-form>
        </li>
        <li class="datebase-li" id="datebase">
          <div class="query-txt-box">
            <img src="../../assets/imgs/query-icon01.png">
            <p>说明:</p>
            <p>1、全国人才职业能力素质评价库用于收集个人相关测评信息。</p>
            <p>2、个人自愿参与测评服务，个人信息和测评报告收录到本库。</p>
            <p>3、本平台个人信息数据均由个人提交整理后发布展现。</p>
            <p>4、本平台查询免费，测评查询结果仅供参考。</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { getlist } from '@/api'
import dialog from '@/utils/dialog'

const router = useRouter();
const formRef = ref(null)
const form = reactive({
  userName: '',
  idCard: '',
  certificateName: ''
})

const rules =  {
  userName: [ { required: true, message: '请输入姓名', trigger: 'blur' } ],
  idCard: [ { 
    required: true, message: '请输入身份证号', trigger: 'blur' },
    {min: 18, max: 18, message: '身份证号长度为18位', trigger: 'blur'}
  ],
  certificateName: [ { required: true, message: '请输入岗位名称', trigger: 'blur' } ],
}

const onSubmit = () => {
  formRef.value.validate((valid) => {
    if (valid) {
        // const form = {
        //   userName: '李俊',
        //   idCard: '511456789123456789',
        //   certificateName: '中级'
        // }
        getlist(form).then(res => {
          const { code, data } = res
          if (code === 0 && data.records.length) {
            router.push({ path: '/certificate', query: { id: data.records[0].id } })
          } else {
            dialog.error('未查询到相关证书')
          }
        })
    } else {
      return false;
    }
  });
}

</script>

<style scoped>
.home {
  width: 100%;
  min-width: 1100px;
  height: 100%;
  min-height: 100vh;
  background: url(../../assets/imgs/login-bg.jpg) no-repeat center center;
  background-size: 100% 100%;
}
.login-logo-box {
  width: 100%;
  min-width: 1100px;
  text-align: center;
  padding-top: 20px;
}
.login-logo-box .container {
  width: 340px;
  margin: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.login-logo-box .logo {
  width: 48px;
  height: 48px;
  background: #2b5ebb;
  
}
.login-logo-box .title {
  font-size: 34px;
  color: #2b5ebb;
  letter-spacing: 10px;
  margin-left: 14px;
}
.login-logo-box .www {
  font-size: 16px;
  color: #2b5ebb;
  letter-spacing: 2px;
}
.login-logo-box img {
  width: 300px;
  margin: 0 auto;
}
.login-box {
  width: 1100px;
  height: 650px;
  background-color: #fff;
  margin: 20px auto 0;
  box-shadow: 0px 0px 20px rgba(125, 134, 162, 0.3);
  position: relative;
}
.login-box-img {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
}
.login-enter {
  width: 1100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.login-enter li {
  width: 550px;
  height: 650px;
  text-align: center;
}
.login-enter li h1 {
  font-size: 22px;
  color: #2b5ebb;
  margin-top: 60px;
  letter-spacing: 0.02em;
}
.login-enter li h2 {
  font-size: 22px;
  font-weight: normal;
  color: #2b5ebb;
  margin-top: 20px;
  margin-bottom: 50px;
  letter-spacing: 0.02em;
}
.query-txt-box {
  width: 360px;
  margin: 0 auto;
}
.query-txt-box img {
  margin-top: 200px;
  margin-bottom: 50px;
}
.query-txt-box p {
  font-size: 12px;
  text-align: left;
  color: #2b5ebb;
  line-height: 28px;
  margin-top: 0;
}

.ipt {
  width: 280px;
}
.btn {
  width: 160px;
  background: #315efb;
}
.btn:focus { 
  background: #315efb;
}
</style>
